{% extends "后台管理/template.html" %}

{% block title %}控制台{% endblock %}

{% block css %}
<style>
    .welcome-card {
        background: linear-gradient(45deg, #696cff, #8592a3);
        color: white;
    }

    .stat-card {
        transition: all 0.3s ease;
    }
    
    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .quick-action {
        transition: all 0.3s ease;
    }
    
    .quick-action:hover {
        transform: translateY(-3px);
        box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    }
</style>
{% endblock %}

{% block content %}
<div class="container-xxl flex-grow-1 container-p-y">
    <!-- 欢迎卡片 -->
    <div class="card welcome-card mb-4">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h4 class="card-title text-white mb-2">欢迎使用 IncentiveHub</h4>
                    <p class="mb-0">IncentiveHub 是一个用于激励用户参与活动的平台</p>
                </div>
                <div class="avatar">
                    <span class="avatar-initial rounded bg-label-white text-primary">
                        <i class="bx bx-home-smile fs-3"></i>
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- 统计卡片 -->
    <div class="row g-4 mb-4">
        <div class="col-sm-6 col-xl-3">
            <div class="card stat-card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="fw-medium d-block mb-1">活动总数</span>
                            <h3 class="card-title mb-0" id="totalActivities">0</h3>
                        </div>
                        <div class="avatar">
                            <span class="avatar-initial rounded bg-label-primary">
                                <i class="bx bx-calendar-event"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card stat-card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="fw-medium d-block mb-1">待审核</span>
                            <h3 class="card-title mb-0" id="pendingCount">0</h3>
                        </div>
                        <div class="avatar">
                            <span class="avatar-initial rounded bg-label-warning">
                                <i class="bx bx-time"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card stat-card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="fw-medium d-block mb-1">参与人数</span>
                            <h3 class="card-title mb-0" id="totalParticipants">0</h3>
                        </div>
                        <div class="avatar">
                            <span class="avatar-initial rounded bg-label-success">
                                <i class="bx bx-user-check"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card stat-card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="fw-medium d-block mb-1">当前版本</span>
                            <h3 class="card-title mb-0" id="currentVersion">-</h3>
                        </div>
                        <div class="avatar">
                            <span class="avatar-initial rounded bg-label-info">
                                <i class="bx bx-code-alt"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 快捷操作 -->
    <div class="row g-4">
        <div class="col-xl-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">快捷操作</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-sm-6">
                            <div class="card quick-action">
                                <a href="/web/ht/activity/" class="card-body text-center p-4">
                                    <i class="bx bx-plus-circle fs-1 text-primary mb-2"></i>
                                    <h5 class="mb-0">创建活动</h5>
                                </a>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="card quick-action">
                                <a href="/web/ht/activity/approve/" class="card-body text-center p-4">
                                    <i class="bx bx-check-circle fs-1 text-success mb-2"></i>
                                    <h5 class="mb-0">审批活动</h5>
                                </a>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="card quick-action">
                                <a href="/web/ht/activity/participate/" class="card-body text-center p-4">
                                    <i class="bx bx-bar-chart fs-1 text-warning mb-2"></i>
                                    <h5 class="mb-0">参与情况</h5>
                                </a>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="card quick-action">
                                <a href="/web/ht/version/" class="card-body text-center p-4">
                                    <i class="bx bx-code-alt fs-1 text-info mb-2"></i>
                                    <h5 class="mb-0">版本管理</h5>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">系统信息</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <strong>登录管理员：</strong>{{ request.session.user.username }}
                    </div>
                 
                    <div class="mb-3">
                        <strong>系统名称：</strong>IncentiveHub
                    </div>
                    <div class="mb-3">
                        <strong>系统描述：</strong>一个用于激励用户参与活动的平台
                    </div>
                    <div class="mb-3">
                        <strong>主要功能：</strong>
                        <ul class="mt-2">
                            <li>活动管理 - 创建和管理各类活动</li>
                            <li>活动审批 - 审核用户的活动完成情况</li>
                            <li>数据统计 - 查看活动参与和完成情况</li>
                            <li>版本管理 - 管理系统版本和更新说明</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
    loadStatistics();
    getCurrentVersion();
});

// 加载统计数据
async function loadStatistics() {
    try {
        const response = await fetch('/api/participation/statistics/?days=7');
        const data = await response.json();
        
        if (data.code === 200) {
            document.getElementById('totalActivities').textContent = data.data.total_activities || 0;
            document.getElementById('totalParticipants').textContent = data.data.total_participants || 0;
            document.getElementById('pendingCount').textContent = data.data.status_counts?.pending || 0;
        }
    } catch (error) {
        console.error('加载统计数据失败:', error);
    }
}

// 获取当前版本
async function getCurrentVersion() {
    try {
        const response = await fetch('/api/system/version/current/');
        const data = await response.json();
        
        if (data.code === 200) {
            document.getElementById('currentVersion').textContent = data.data.version;
        }
    } catch (error) {
        console.error('获取当前版本失败:', error);
    }
}
</script>
{% endblock %}

{% block nav_left %}
{% include '后台管理/components/左侧导航栏.html' %}
{% endblock %}

{% block NavBar %}{% endblock %}

{% block footer %}{% include '后台管理/components/Footer.html' %}{% endblock %}